<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--父组件模板-->
<div id="app">
  <cpn @itemclick="cpnclick"></cpn>
</div>
<!--子组件模板-->
<template id="cpn">
  <div>
    <button v-for="item in tools" v-on:click="btnClick(item)">{{item.value}}</button>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const cpn = {
    template: '#cpn',
    data() {
      return {
        tools: [
          {id: 1, value: '热门推荐'},
          {id: 2, value: '电脑平板'},
          {id: 3, value: '服装衣物'},
          {id: 4, value: '工具器械'}
        ]
      }
    },
    methods: {
      btnClick(item) {
        //向父组件发送一个事件 以及参数item  自定义事件itemclick
        this.$emit('itemclick',item)
      }
    }
  }

  const vm = new Vue({
    el: '#app',
    data: {},
    components: {
      cpn
    },
    methods: {
      //父组件接收传送过来的item数据
      cpnclick(item){
        console.log(item)
      }

    }
  })
</script>

</body>
</html>